<template>
	<view class="page-content">

		<!-- 日期按钮 -->
		<view class="flex-between">
			<!-- 开始日期 -->
			<view style="flex:1" class="date-item">
				<view class="flex-center">
					<uni-datetime-picker type="date" v-model="startpicker" @change="startDateConfirm"
						:end="startRangeDate">{{startDateValue}}
						<image src="../../../static/wallet/triangle.png" mode=""
							style="width: 8px;height: 7px;margin-left: 10px;"></image>
					</uni-datetime-picker>
				</view>
			</view>

			<!-- 结束日期 -->
			<view style="flex:1" class="date-item">
				<view class="flex-center">
					<uni-datetime-picker type="date" v-model="endpicker" @change="endDateConfirm" :end="lastDate"
						:start="endRangeDate">{{endDateValue}}
						<image src="../../../static/wallet/triangle.png" mode=""
							style="width: 8px;height: 7px;margin-left: 10px;"></image>
					</uni-datetime-picker>
				</view>
			</view>
		</view>


		<!-- 列表 -->
		<view class="list-box" style="height:calc(100vh - 165px);">

			<view class="list-item" v-for="(item,index) in list" >
				<view class="flex-between" style="padding: 15px;">
					<view style="font-size: 15px;font-weight: 600;">
						场次：0729小野2池10000斤正钓
					</view>
					<view>
						<radio-group @change="radioChange">
							<label>
								<view>
									<radio :value="item.id" :checked="index === current" color="#e64340"/>
								</view>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="line">

				</view>
				<view style="font-size: 13px;padding: 15px;">
					<view style="margin-bottom: 6px;">
						钓场：{{item.site}}
					</view>
					<view style="margin-bottom: 6px;">
						场次状态：{{item.site}}
					</view>
					<view style="margin-bottom: 6px;">
						发布时间：{{item.site}}
					</view>
					<view>
						垂钓时间：{{item.site}}
					</view>
				</view>
			</view>

			<!-- </scroll-view> -->
		</view>

		<view class="flex-center">
			<button type="warn" style="width: 250px;font-size: 14px;border-radius: 17.5px;" @click="toDetailInfo()">确认</button>
		</view>
	</view>
</template>

<script>
	import {
		get_wallet_detail
	} from '@/utils/siteAccountApi/index.js'
	//转换日期格式
	const formatDate = function(dateValue, format) {
		var date = new Date(dateValue);
		var y = date.getFullYear();
		var m = date.getMonth() + 1;
		m = m < 10 ? ('0' + m) : m;
		var d = date.getDate();
		d = d < 10 ? ('0' + d) : d;
		var h = date.getHours();
		var minute = date.getMinutes();
		minute = minute < 10 ? ('0' + minute) : minute;
		let time = y + '-' + m + '-' + d
		if (format == 'MM-DD') {
			time = m + '-' + d
		}
		if (format == 'MM') {
			time = m
		}
		if (format == 'YY-MM') {
			time = y + '/' + m
		}
		if (format == 'YY-MM-DD') {
			time = y + '-' + m + '-' + d
		}
		if (format == 'YY-MM-DD HH:mm') {
			time = y + '/' + m + '/' + d + ' ' + h + ':' + minute
		}
		return time
	}
	/* 时间yyyy-MM-dd HH:mm:ss转为时间戳 */
	const timeToTimestamp = (time) => {
		let timestamp = Date.parse(new Date(time).toString());
		return timestamp;
	}

	var finalDate = formatDate(timeToTimestamp(new Date()))

	console.log(finalDate);
	export default {
		data() {
			return {
				selectType: 1,
				incomeTotal: 0,
				expenditureTotal: 0,
				list: [{
						id: 0,
						name: '鱼获结算到账',
						type: 1,
						time: '2024-07-29 12:44',
						total: '1860.00',
						num: 311.0,
						site: '123'
					},
					{
						id: 1,
						name: '鱼获结算到账',
						type: 1,
						time: '2024-07-29 12:44',
						total: '1860.00',
						num: 311.0,
						site: '123'
					}
				],

				startDateValue: '开始日期',
				endDateValue: '结束日期',

				startpicker: '',
				endpicker: '',
				//最终日期
				lastDate: finalDate,
				startRangeDate: finalDate,
				endRangeDate: '2023-09-09',
				tabArr: [{
						id: 1,
						name: '全部'
					},
					{
						id: 2,
						name: '收入'
					},
					{
						id: 3,
						name: '支出'
					}
				],

				//接口返回的数据 
				apiResult: {},
				current: 0

			}
		},
		methods: {
			clickTab(item) {
				let id = item.id
				this.selectType = id


				if (this.selectType == 1) {
					this.list = this.apiResult[2].all_data
				}
				if (this.selectType == 2) {
					this.list = this.apiResult[3].income_data
				}
				if (this.selectType == 3) {
					this.list = this.apiResult[4].expend_data
				}
			},


			startDateClose() {
				console.log('弹窗关闭');
			},
			endDateClose() {
				console.log('弹窗关闭');
			},

			startDateConfirm(e) {

				this.startDateValue = e
			},
			endDateConfirm(e) {

				this.endDateValue = e

			},
			searchList() {
				let data = {
					start_date: this.startDateValue == '开始日期' ? '' : this.startDateValue,
					end_date: this.endDateValue == '结束日期' ? '' : this.endDateValue
				}
				get_wallet_detail(data).then(res => {
					if (res.code == 200) {
						this.incomeTotal = res.data[0].income
						this.expenditureTotal = res.data[1].expend
						this.apiResult = res.data
						// if(this.selectType==1){
						// 	this.list=res.data[2].all_data
						// }
						// if(this.selectType==2){
						// 	this.list=res.data[3].income_data
						// }
						// if(this.selectType==3){
						// 	this.list=res.data[4].expend_data
						// }
					}

				})
			},

			toDetailInfo() {
				let payment_id = ''
				uni.navigateTo({
					url: `/pages/fashingSite/ticketAgent/sellTicketRecordDetail?payment_id=${payment_id}`
				});
			},

			radioChange: function(evt) {
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].id === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			}


		},

		onReady() {

			this.searchList()
		},
		watch: {
			endDateValue(newValue, oldValue) {
				console.log(newValue)
				if (newValue != '结束日期') {
					this.startRangeDate = newValue
					if (this.startDateValue != '开始日期') {
						this.searchList()
					}
				}
			},
			startDateValue(newValue, oldValue) {
				if (newValue != '开始日期') {
					this.endRangeDate = newValue
					if (this.endDateValue != '结束日期') {
						this.searchList()
					}
				}
			}
		}
	}
</script>

<style lang='scss' scoped>
	.page-content {
		background: #F3F4F6;
		height: 100vh;
		box-sizing: border-box;
	}

	.selectActive {
		color: #E61010;
		border-bottom: 3px solid #E61010;
	}

	/* .total-box */
	.tab-box {
		background: #fff;
	}

	.tab-item {
		padding: 15px 35px;
		padding-bottom: 10px;
		font-weight: 600;
		margin-bottom: 10px;
		font-size: 15px;
	}

	.date-item {
		border-top: 1px solid #ccc;
		text-align: center;
		font-weight: 600;
		padding: 15px 0;
		background-color: #fff;
	}

	.list-box {
		/* background: #fff; */
		box-sizing: border-box;
		/* padding: 7px; */
	}

	.list-item {
		background: #fff;
		margin: 10px;
		/* padding: 15px; */
		font-size: 13px;
		border-radius: 10px;
	}

	.line {
		border-bottom: 1px solid #f0f0f0;
	}
</style>